<sb-layout-dashboard>
    <sb-dashboard-head title="System" [hideBreadcrumbs]="false"></sb-dashboard-head>

    <div class="row">
        <div class="col-xl-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-area"]'></fa-icon>System CPU
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('system', 'cpu') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getSystemFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
        <div class="col-xl-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-area"]'></fa-icon>System RAM
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('system', 'ram') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getSystemFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-bar"]'></fa-icon>DayZ CPU
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('process', 'cpu') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getPlayerFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
        <div class="col-lg-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-pie"]'></fa-icon>DayZ RAM
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('process', 'ram') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getSystemFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-bar"]'></fa-icon>Manager CPU
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('manager', 'cpu') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getSystemFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
        <div class="col-lg-6">
            <sb-card>
                <div class="card-header">
                    <fa-icon class="mr-1" [icon]='["fas", "chart-pie"]'></fa-icon>Manager RAM
                </div>
                <div class="card-body">
                    <sb-charts-area [chartConf]="(commonService.chart('manager', 'ram') | async)!"></sb-charts-area>
                </div>
                <div class="card-footer small text-muted">Last Updated: {{ (getSystemFetcher().lastUpdate | async) | date:'medium' }}</div>
            </sb-card>
        </div>
    </div>
</sb-layout-dashboard>
